<template>
    <div>
        <div style="display: flex; justify-content: flex-end;">
            <el-button type="primary" @click="dialogVisible = true">上传图片</el-button>
        </div>
        <div class="list">
            <el-table :data="imageList" style="width: 100%">
                <el-table-column
                    label="图片"
                    width="400"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.image" class="img" >
                    </template>
                </el-table-column>
                <el-table-column
                    label="图片名称"
                    width="240"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="大小"
                    width="180"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.size }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="类型"
                    width="180"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    
        <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :total="totalPages"
                :page-size="10"
                :current-page="currentPage"
                @current-change="getImageList"
            >
            </el-pagination>
        </div>
    
        <el-dialog
            title="上传图片"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-upload
                class="upload-demo"
                ref="upload"
                action="http://localhost:3001/upload"
                :headers="headerObj"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false"
                :on-success="onSuccess"
            >
                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">提交</el-button>
            </el-upload>  
    
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
  export default {
    name: 'upload',
    data() {
        return {
            fileList:[],
            headerObj:{
                Authorization:localStorage['token']
            },
            dialogVisible: false,
            imageList:[],
            totalPages:0,
            currentPage:1
        }
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
            this.dialogVisible = false;
            history.go(0)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        onSuccess(res) {
            if(res.data.code === 500) {
                alert(res.data.msg)
            }else{
                history.go(0)
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(() => {
                done();
            })
            .catch(() => {});
        },
        async handleDelete(index, row) {
            let res = await this.$axios.post('/delImage',{id:row.id},{headers:{Authorization:localStorage['token']}})

            if(res.code === 200) {
                this.imageList.slice(index,1)
            }

            history.go(0)
        },
        async getImageList(page) {
            if(typeof page !== 'undefined') {
                this.currentPage = page
            }

            let res = await this.$axios.get('/getImageList',{params: {page:this.currentPage},headers: {Authorization:localStorage['token']}})

            this.imageList = res.data.data
            this.totalPages = res.data.totalPages
        }
    },
    mounted() {
        this.getImageList()
    }
  }
</script>

<style>
    .con{
        margin-top: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img{
        width: 200px;
        height: 200px;
    }
    .header{
        display: flex;
        justify-content: space-between;
    }
    .header h1{
        margin-left: 50px;
    }
    .list{
        margin: 40px;
    }
</style>